import * as echarts from 'echarts'
import { useEffect, useRef } from 'react'
import styles from './index.module.scss'

function Echart({ el }) {
  const threeRef = useRef(null)

  useEffect(() => {
    const myChart03 = echarts.init(threeRef.current)

    const updateOption = () => {
      const option03 = {
        backgroundColor: 'transparent',
        legend: {
          type: 'plain',
          icon: 'circle',
          left: '22',
          bottom: '10',
          itemWidth: 12,
          itemHeight: 12,
          textStyle: {
            color: '#7DB9F9',
            fontSize: 20,
            fontWeight: 400,
            fotFamily: 'SourceHanSansCN-Regular'
          },
          data: [
            {
              name: '干预前',
              itemStyle: {
                color: '#26BFE1'
              }
            },
            {
              name: '干预后',
              itemStyle: {
                color: '#F4BF5C'
              }
            }
          ]
        },
        series: [
          {
            name: '干预后',
            type: 'pie',
            silent: true,
            clockWise: false,
            hoverAnimation: false,
            radius: ['70%', '60%'],
            center: ['50%', '45%'],

            label: {
              show: false,
            },
            data: [
              {
                value: el?.degree <= el?.degree_start ? +el?.degree_start + 0.01 : el?.degree,
                itemStyle: {
                  color: '#F4BF5C', // out
                  borderRadius: '20px'
                },
              },
              {
                value: 12 - (el?.degree <= el?.degree_start ? +el?.degree_start + 0.01 : el?.degree),
                itemStyle: {
                  color: 'transparent',
                },
              },
            ],
          },
          {
            name: '干预后',
            type: 'pie',
            silent: true,
            z: 1,
            clockWise: false, //顺时加载
            hoverAnimation: false, //鼠标移入变大
            radius: ['70%', '60%'],
            center: ['50%', '45%'],
            label: {
              show: false,
            },
            data: [
              {
                value: 120,
                itemStyle: {
                  color: '#EEF1F8',
                  borderRadius: '20px',
                  opacity: 0.2
                  // borderWidth: 20,
                  // borderColor: '#F4BF5C'
                },
              },
            ],
          },
          {
            name: '干预前',
            type: 'pie',
            silent: true,
            clockWise: false,
            hoverAnimation: false,
            radius: ['40%', '30%'],
            center: ['50%', '45%'],

            label: {
              show: false,
            },
            data: [
              {
                value: el?.degree_start,
                itemStyle: {
                  color: '#26BFE1',
                  borderRadius: '20px'
                },
              },
              {
                value: 12 - el?.degree_start,
                itemStyle: {
                  color: 'transparent',
                },
              },
            ],
          },
          {
            name: '干预前',
            type: 'pie',
            silent: true,
            z: 1,
            clockWise: false, //顺时加载
            hoverAnimation: false, //鼠标移入变大
            radius: ['40%', '30%'],
            center: ['50%', '45%'],
            label: {
              show: false,
            },
            data: [
              {
                value: 120,
                itemStyle: {
                  color: '#EEF1F8',
                  borderRadius: '20px',
                  opacity: 0.2
                  // borderWidth: 20,
                  // borderColor: '#F4BF5C'
                },
              },
            ],
          }
        ]
      }
      myChart03.setOption(option03)
    }

    updateOption()

    const handleResize = () => {
      updateOption()
      myChart03.resize()
    }
    window.addEventListener("resize", handleResize)
  }, [el])

  return (
    <div ref={threeRef} className={styles.threeEchart}></div>
  )
}


export default Echart